import React, { useCallback } from "react";
import CloseIcon from "../../../shared/icons/close.svg?react";
import Image from "next/image";
import { AdminListProductsProps } from "./type";
import InputAtom from "../../Atoms/Input.Atom";
import { InputAtomEnum } from "../../Atoms/Input.Atom/enum";
import TextAtom from "../../Atoms/Text.Atom";
import TextAtomEnum from "../../Atoms/Text.Atom/enum";
import ImageAtom from "../../Atoms/Image.Atom";
import ImageEnum from "../../Atoms/Image.Atom/enum";
import { useDeleteAdminProduct } from "@/business.InterfaceLayer/hooks/store/useAdminQueryStore/mutation/useDeleteAdminProduct";

const AdminListProducts: React.FC<AdminListProductsProps> = ({ product }) => {
  const deleteProductMutation = useDeleteAdminProduct();

  const handleRemove = useCallback(
    (productId: number) => {
      deleteProductMutation.mutate(productId);
    },
    [deleteProductMutation]
  );

  return (
    <table className="w-full table-fixed">
      <tbody>
        <tr>
          <td className="w-[30px]"></td>
          <td className="w-[40px]">
            <InputAtom className="align-middle" type={InputAtomEnum.CHECKBOX} />
          </td>
          <td className="w-[40px]">
            <TextAtom type={TextAtomEnum.enum_h5} className="align-middle">
              {product?.product_id}
            </TextAtom>
          </td>
          <td className="w-[65px]">
            <Image
              className="w-[45px] h-[45px] rounded-full border-[1] border-borderColor"
              src={`/img/${product?.img_paths?.[0]}.png`}
              alt="image"
              width={720}
              height={480}
            />
          </td>
          <td className="w-[240px]">
            <TextAtom type={TextAtomEnum.enum_h5}>{product?.title}</TextAtom>
          </td>
          <td className="w-[100px]">
            <TextAtom type={TextAtomEnum.enum_h5}>{product?.brand}</TextAtom>
          </td>
          <td className="w-[100px]">
            <TextAtom type={TextAtomEnum.enum_h5}>{product?.category}</TextAtom>
          </td>
          <td className="w-[100px]">
            <TextAtom type={TextAtomEnum.enum_h5}>{product?.price} ₽</TextAtom>
          </td>
          <td className="w-[80px]">
            <TextAtom type={TextAtomEnum.enum_h5}>{product?.colors}</TextAtom>
          </td>
          <td className="w-[70px]">
            <div className="flex justify-around">
              <ImageAtom
                type={ImageEnum.enum_defaultSvg}
                icon={<CloseIcon />}
                onClick={() => handleRemove(product.product_id)}
                className="fill-tiffany w-6 h-6 cursor-pointer hover:fill-peach"
              />
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  );
};
export default React.memo(AdminListProducts);
